Airtable 如何通過服務器端渲染 React 改進 SEO。搜索網絡是新用戶發現新業務和解決方案的常用方式。成功的用戶獲取策略通常涉及尋找方法來增加您網站的流量，排名高于競爭對手，并最終說服用戶注冊您的產品或安裝您的應用程序。小的優化有可能產生巨大的影響，這就是搜索引擎優化 (SEO) 至關重要的原因。
在 2021 年期間，我們著手為我們的營銷登陸頁面創建一個新的以 SEO 為中心的基礎架構，以優化我們的搜索引擎排名并吸引更多 Airtable 的潛在用戶。更高的排名意味著來自使用搜索引擎的人的新印象、點擊和轉化。
從歷史上看，Airtable 的登錄產品和注銷營銷登錄頁面位于同一個 repo 中，主要使用客戶端呈現的 React。當我們決定將注銷頁面拆分到它們自己的存儲庫中時，我們有機會重新設計登錄頁面的基礎結構，以更好地滿足 SEO 需求。
優化 HTML 的生成方式是 SEO 的基礎，所有其他改進都將在此基礎上進行。換句話說，如果您的 Web 應用程序框架和構建系統不能很好地促進 SEO，那么在其他層面上投資 SEO 工作就會變得更加困難。我們對營銷頁面的不同基礎架構選項進行了探索：
- 靜態網絡應用
- 客戶端呈現的網絡應用程序
- 服務器端呈現的網絡應用程序
我們最終決定服務器端渲染最好地為 SEO 的成功建立一個代碼庫；并選擇 NextJS 作為框架來促進它。讓我向您介紹為什么我們做出這個決定，以及它如何使專注于改進其 SEO 基礎架構的團隊受益。
項目目標
- 讓搜索引擎盡可能容易地索引我們的網頁
- 確保對我們頁面的更改可以及時編入索引
- 無需重新部署網絡應用程序即可啟用動態呈現的內容
- 繼續利用 React 和 Typescript 來保持兩個存儲庫的一致性
Google 如何抓取網頁并將其編入索引
為了在不同的網絡應用程序基礎設施選項之間進行評估，我們需要了解搜索引擎如何發現和解析網頁以產生有機搜索結果。2021 年，谷歌占所有搜索引擎搜索量的 90% 以上。因此，我們的 SEO 評估將幾乎完全集中在 Google 搜索上。
更新頁面或添加新頁面后，新內容可能需要4 天到 4 周的時間才能顯示在 Google 搜索結果中。Google 的網絡爬蟲Googlebot在將頁面數據發送到排名算法之前具有三個處理階段：
- 爬行
- 渲染
- 索引
爬行隊列
爬蟲負責搜索 Internet 以發現 URL。它向爬行隊列中的已知 URL 發送 HTTP 請求以檢索頁面的 HTML。然后，爬蟲會解析 HTML 以查找更多要添加到爬網隊列的 URL。
例如，如果從抓取隊列中檢索到 URL 并返回以下 HTML，則在檢查文件以確保允許該頁面被索引/store后，將發現該 URL 并將其添加到抓取隊列中。robots.txt
<html lang="zh-cn">
<head>
<script src="main.js" />
</head>
<body>
<div>
<h1>Kitty Litter</h1>
<a href="/store">網上商城</a>
</div>
</body>
</html>
爬蟲不執行任何 JavaScript，只會解析它提供的 HTML。這意味著如果頁面在 JS 執行之前包含所有必要的內容，那么 Googlebot 已經擁有索引和排名頁面所需的所有信息。
另一方面，如果 JS 需要運行以生成頁面內容，那么 Googlebot 需要先完成渲染網站的額外工作，然后才能正確抓取頁面并將其編入索引。
JS 渲染隊列
Googlebot 的渲染器將使用無頭 Chromium 實例來解析和執行 JS，以生成完整的 HTML 頁面。HTML 被發送到爬蟲，因此可以再次解析它并可以發現 URL。呈現的 HTML 也被發送到索引器進行處理。
想象一下每天持續抓取和呈現所有互聯網需要多少處理能力！甚至谷歌也有其局限性。您的網站被編入索引的速度受Googlebot 實例的可用性、帶寬和時間的限制。
但是，與任何代碼一樣，JS 中可能存在阻止 Googlebot 為頁面編制索引的錯誤。企業需要主動監控Google Search Console，以檢查 Googlebot 是否遇到 JS 錯誤。
索引隊列
索引器負責在將頁面內容添加到搜索索引之前解析和分析頁面內容。在此步驟中，Googlebot 將嘗試根據標題、關鍵字和整個頁面內容來理解內容的意圖。
在設置初始 Web 應用程序基礎結構后，為索引器優化內容成為 SEO 的主要焦點。
比較基礎架構選項
下表總結了我們考慮的三個基礎架構選項之間的比較以及每個選項的優缺點，我將對此進行更詳細的討論。
靜態HTML
靜態網站可以說是最容易設置的，因為在最簡單的形式中，它由具有固定內容的 HTML 文件組成，這些文件可以用作靜態的、可緩存的資產。不需要服務器邏輯，文件完全按照存儲的方式發送到瀏覽器。術語Jamstack有時用于描述此架構，因為部署只是一堆文件。
盡管可以在沒有任何 Web 庫或框架的情況下構建靜態網站站點，但靜態站點生成器 (SSG)（例如 Next.js、Hugo、Gatsby、Jekyll 等）允許使用組件等復雜的 Web 開發功能。這些框架在構建時將代碼轉換為靜態 HTML，然后可以將其部署到內容分發網絡 (CDN)。在構建期間而不是在 Web 服務器上按需生成標記的過程稱為預渲染。
初始 HTML 包含所有內容
相同的 HTML 會在第一頁加載時提供給每個訪問者，包括搜索引擎機器人。這使得 Googlebot 無需解析和執行 JS 即可輕松抓取頁面并將其編入索引。這并不意味著我們不能在頁面上使用 JS 來使元素交互，但由于我們沒有在客戶端使用 JS 來生成 HTML，我們正在為 SEO 的成功做好準備。
無與倫比的速度和性能
因為靜態 Web 應用程序項目只是一堆文件，所以它們可以直接從 CDN 分發。沒有應用服務器或任何預處理，以及用戶瀏覽器可以緩存靜態文件的事實意味著應用程序將具有非?？斓男阅?。快速加載時間意味著更好的用戶體驗和更好的 SEO 支持。
需要部署才能更改內容
更新頁面是指通過代碼部署更新文件系統上的一個或多個文件。這對于簡單的項目可能沒問題，但對于更新非常頻繁且沒有持續部署 (CD) 的更大更復雜的項目，這可能會成為一個巨大的麻煩。
客戶端呈現 (CSR) HTML
客戶端呈現的應用程序意味著 HTML 內容幾乎完全使用 JS 在瀏覽器中呈現。頁面的初始 GET 請求返回一個部分 HTML 文件，其中包含<script>引用主 JS 文件的標記。JS 代碼運行并將頁面內容注入瀏覽器的 DOM。
每個頁面都不是有不同的 HTML 文件，而是在瀏覽器中動態創建每個路由。React、Vue、Angular 和 Ember 都是客戶端渲染框架的例子。與靜態站點類似，不需要 Web 服務器邏輯，可以將 JS 包和其他構建工件部署到靜態服務器或 CDN。
初始 HTML 缺少關鍵頁面內容
如果您要在瀏覽器中禁用 JS 并訪問客戶端呈現的網頁，該頁面很可能會丟失關鍵的頁面內容。<script>這是因為在執行標記中引用的 JS 以將頁面內容注入瀏覽器的 DOM之前，從服務器檢索的初始 HTML 是不完整的。
例如，如果下面的 HTML 被抓取工具抓取，它將沒有可抓取的內容，Google 需要將 URL 添加到呈現隊列。with 元素id=”root”是DOM 容器，頁面內容將在 JS 執行后在運行時注入。
<html lang="en">
<head>
<script src="main.js" />
</head>
<body>
<div id="root">
正在加載...
</div>
</body>
</html >
性能影響
由于瀏覽器正在執行生成 HTML 的繁重工作，因此需要將任何正在使用的第 3 方 JS 依賴項下載到客戶端，這會增加帶寬并降低性能。瀏覽器需要做的工作越多，對用戶體驗和 SEO 的影響就越大。因為 JS 必須在 HTML 被抓取之前運行，所以 CSR 網頁需要更長的時間才能出現在搜索結果中。
動態內容
由于 HTML 是在客戶端動態生成的，因此可以非常靈活地調用 API 并向不同的用戶顯示不同的內容，或者通過更新 CMS 或數據庫來更新內容而無需部署代碼。
服務器端呈現 (SSR) HTML
服務器端呈現是將客戶端 JavaScript 應用程序呈現為服務器上的靜態 HTML 的過程。SSR 是一個很大的類別，與靜態站點和 CSR 都有重疊。它類似于靜態站點生成器，因為 JS 框架用于從服務器生成 HTML，但 SSR Web 應用程序可以在 Web 服務器上運行時動態地執行此操作。這意味著當用戶或機器人訪問網頁時，服務器會收到 http 請求并動態生成特定于該請求的 HTML，然后將其返回給客戶端。我所說的這種 SSR 的“風味”，有時也被稱為經典 SSR。為避免將此基礎結構與預渲染混淆，主要區別在于渲染發生在運行時而不是構建時。
所有流行的現代 Web 框架（如 React、Vue 和 Angular）都支持某種形式的 SSR，而 Next.js 等框架專門圍繞支持服務器端渲染而構建。
初始 HTML 包含所有內容
由于頁面的初始 GET 請求返回 HTML 中的所有內容，因此 Googlebot 可以很容易地抓取頁面并將其編入索引。
動態內容
由于 HTML 是在服務器上動態生成的，因此可以非常靈活地調用 Web 服務器內的 API、向不同的用戶顯示不同的內容，或者無需使用 CMS 或數據庫部署代碼即可更新內容。
性能影響
由于服務器正在執行生成 HTML 的繁重工作，因此會對性能產生影響。這可以通過添加一些 HTML 緩存來調解，但它不會像靜態站點那樣快。
文章鏈接： http://www.qzkangyuan.com/12882.html
文章標題：服務器端渲染及其與SEO的關系
文章版權：夢飛科技所發布的內容，部分為原創文章，轉載請注明來源，網絡轉載文章如有侵權請聯系我們！
